<!-- PortChargesContent.vue -->
<template>
  <div class="port-charges-content">
  
    <div class="table-row">
      <!-- 第一个表格（可滚动） -->
      <div class="table-container main-table">
        <div class="table-scrollable">
          <table>
            <thead>
            <tr>
              <th v-for="header in displayedHeaders" :key="header">{{ header }}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="i in 20" :key="i">
              <td v-for="header in displayedHeaders" :key="header">数据 {{ i }}-{{ header }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 第二个表格（Matching Locations） -->
      <div class="table-container matching-locations">
        <div class="table-scrollable">
          <table>
            <thead>
            <tr>
              <th colspan="2">Matching Locations</th>
            </tr>
            <tr>
              <th v-for="header in table2Headers" :key="header">{{ header }}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(row, index) in table2Data" :key="index">
              <td>{{ row.field }}</td>
              <td>{{ row.location }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 第三个表格和附加控件 -->
    <div class="fee-section">
      <div class="fee-table-container">
        <div class="table-scrollable">
          <table>
            <thead>
            <tr>
              <th v-for="header in table3Headers" :key="header">{{ header }}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(row, index) in table3Data" :key="index">
              <td v-for="header in table3Headers" :key="header">{{ row[header] }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="additional-controls">
        <div class="control-item">
          <label for="calculator">计算器:</label>
          <select id="calculator">
            <option value="">选择计算器</option>
            <!-- 添加更多选项 -->
          </select>
        </div>
        <div class="control-item">
          <label for="formula">计算公式:</label>
          <input id="formula" type="text" placeholder="输入计算公式">
        </div>
        <div class="control-item checkbox-item">
          <input type="checkbox" id="agentRate">
          <label for="agentRate">代理费率</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PortChargesContent',
  props: {
    isOriginPort: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      baseHeaders: [
        '起运港', '目的港', '三角贸易', '中转港', '运输方式', '币种', '承运人', '承运人代码', 'ULD', '集装箱等级',
        '控制客户', '船舶类别', '承运人 品牌', 'Comm.Local', '接到客户',
        '单位', '运输时间', '频率', '频率单位', '开始日期', '到期日期', '客户合约号', '订舱号', '发布',
        '服务代码', 'FMC TID', '运输方', '付款条款改写', '服务提供商'
      ],
      table2Headers: ['Field', 'Location'],
      table2Data: [
        { field: 'Field 1', location: 'Location 1' },
        { field: 'Field 2', location: 'Location 2' },
        { field: 'Field 3', location: 'Location 3' },
        { field: 'Field 4', location: 'Location 4' },
        { field: 'Field 5', location: 'Location 5' },
        { field: 'Field 6', location: 'Location 6' },
        { field: 'Field 7', location: 'Location 7' },
        { field: 'Field 8', location: 'Location 8' },
      ],
      table3Headers: [
        '费用代码', '说明', '单位', '本地说明', '改写说明', '实际重量/体积', '单位/适数', '条件类型', '表述式',
        '精主类型', '服务类别', '承运人服务费', '商品', '集装', '合同号'
      ],
      table3Data: [
        {
          '费用代码': 'CODE001',
          '说明': this.isOriginPort ? '起运港费用示例1' : '目的港费用示例1',
          '单位': 'CNY',
          // ... 其他字段
        },
        {
          '费用代码': 'CODE002',
          '说明': this.isOriginPort ? '起运港费用示例2' : '目的港费用示例2',
          '单位': 'USD',
          // ... 其他字段
        },
        // 添加更多行以展示滚动效果
      ]
    }
  },
  computed: {
    displayedHeaders() {
      const headers = [...this.baseHeaders];
      const insertIndex = headers.findIndex(header => header === '接到客户') + 1;

      if (this.isOriginPort) {
        headers.splice(insertIndex, 0, '发货人', '港口运输地址');
      } else {
        headers.splice(insertIndex, 0, '收货人', '港口运输地址');
      }

      return headers;
    }
  }
}
</script>

<style scoped>
/* 样式保持不变 */
.port-charges-content {
  margin-top: 10px;
}

.fcl-freight-content {
  margin-top: 10px;
}

.table-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.table-container {
  margin-bottom: 15px;
  border: 1px solid #ccc;
}

.table-scrollable {
  overflow: auto;
  max-height: 300px;
}

.main-table {
  flex: 1 1 70%;
  min-width: 300px;
  margin-right: 15px;
}

.matching-locations {
  flex: 1 1 25%;
  min-width: 200px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  white-space: nowrap;
}

th {
  background-color: #f0f0f0;
  font-weight: normal;
  position: sticky;
  top: 0;
  z-index: 1;
}

.matching-locations th[colspan="2"] {
  text-align: center;
}

.fee-section {
  display: flex;
  margin-bottom: 15px;
  width: 100%;
}

.fee-table-container {
  flex: 1;
  margin-right: 20px;
  min-width: 0;
}

.additional-controls {
  width: 250px;
  flex-shrink: 0;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.control-item {
  margin-bottom: 15px;
}

.control-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.control-item select,
.control-item input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.checkbox-item {
  display: flex;
  align-items: center;
}

.checkbox-item input[type="checkbox"] {
  margin-right: 5px;
}

.checkbox-item label {
  display: inline;
  font-weight: normal;
}

@media (max-width: 1200px) {
  .fee-section {
    flex-direction: column;
  }

  .fee-table-container,
  .additional-controls {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .additional-controls {
    order: -1;
  }
}
</style>

Version 2 of 2
